<template>
  <el-dialog
    :visible.sync="dialogVisible"
    @close="close">
    <div slot="title">{{ info.type === 1 ? '新增' : '编辑' }}</div>
      <el-form hide-required-asterisk
       :model="refFormData"
       label-width="80px"
       :rules="rules"
       class="label-row"
       ref="refForm">
        <el-form-item prop="user_name" label="登录名">
          <el-input clearable
                    size="small"
                    autofocus
                    v-model="refFormData.user_name" placeholder="请输入登录名"></el-input>
        </el-form-item>
        <el-form-item prop="group_id" label="部门">
        <el-select v-model="refFormData.group_id" size="small"
                filterable
                reserve-keyword
                @change="groupChange"
                placeholder="请选择部门">
        <el-option
          v-for="item in groupList"
          :key="item.id"
          :value="item.id" :label="item.name" />
      </el-select>
        </el-form-item>
        <el-form-item prop="role_id" label="角色">
            <el-select v-model="refFormData.role_id" size="small"
                    filterable
                    reserve-keyword
                    placeholder="请选择角色">
            <el-option
              v-for="item in list"
              :key="item.id"
              :value="item.id" :label="item.name" />
          </el-select>
        </el-form-item>


        <el-form-item v-if="this.info.type === 1"  prop="password" label="密码">
          <el-input clearable
           size="small"
                    autofocus
                    v-model="refFormData.password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item prop="real_name" label="姓名">
          <el-input clearable
           size="small"
                    autofocus
                    v-model="refFormData.real_name" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item prop="email" label="邮箱">
          <el-input clearable
           size="small"
                    autofocus
                    v-model="refFormData.email" placeholder="请输入邮箱"></el-input>
        </el-form-item>
          <el-form-item prop="phone" label="联系电话">
          <el-input clearable
           size="small"
                    autofocus
                    v-model="refFormData.phone" placeholder="请输入联系电话"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="warning" @click="close()">取消</el-button>
        <el-button type="success" @click="submit('refForm')">保存</el-button>
      </span>
  </el-dialog>
</template>

<script>
  export default {
    name:'dialogBox',
    props: {
      info : {
        type: Object,
        default: () => ({
        })
      }
    },
    data(){
      return {
        dialogVisible: true, // 弹框
        refFormData:{
          "user_name": "",
          "password": "",
          "group_id": 2,
          "role_id": 1,
          "real_name": "",
          "phone": "",
          "email": ""
        },
        rules: {
          name: [
            { required: true, message: '', trigger: 'blur' },
            { min: 1, max: 30, message: '', trigger: 'blur' }
          ],
        },
        list: [], // 角色
        groupList: [] // 部门
      };
    },
    mounted(){
      this.refFormData = {
        ...this.info
      }
      if(this.info.role_id) this.getList()
      this.getGroupList()
    },
     methods: {

     /**
      * @Desc 数据提交
      * */
      async submit(formName){
        this.$refs[formName].validate(async (valid) => {
          if (!valid) return
          const params = {
            ...this.refFormData
          }
          console.log(params)
          const { data } = await this.$api.user[this.info.type === 1 ? 'add' : 'update'](params)
          this.__globalHandleResponseMixin(data
            ,() => {
              this.$emit('getList')
              this.close()
          })
        })
      },

    /*
     * @Desc: 获取列表
     * @params: {String}
     * @return: {Object}
    */
    async getList() {
      const { data } = await this.$api.role.getList({
        group_id: this.refFormData.group_id
      })
      const { code, data: list } = data
      if(code === 200) {
        this.list = list
      }
    },

     /**
      * @Desc 关闭
      * @params {String}
      * @return {Object}
      * */
      close(){
        this.$emit('close')
      },

      /* @Desc: 获取部门列表
      * @params: {String}
      * @return: {Object}
      */
      async getGroupList() {
        const { data } = await this.$api.group.getList();
        this.__globalHandleResponseMixin(data, () => {
          this.groupList = data.data;
        });
      },

      /* @Desc: 监听部门变化
        * @params: {String}
        * @return: {Object}
        */
      groupChange() {
        this.refFormData.role_id = null;
        this.getList()
      },
    },
  }
</script>

<style lang='less' scoped>
</style>
